import React from "react";
import './hocDrag.css';

export default function hocDrag(WrapperComponent) {


  return class extends React.Component {
    state = {
      left: 100,
      top: 300
    };

    mouseDown(ev) {
      let {top, left} = this.state;
      let disX = ev.clientX - left;
      let disY = ev.clientY - top;

      document.onmousemove = e => {
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        this.setState({
          left, top
        })
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;

      }
    }

    render() {
      let {top, left} = this.state;
      return (
        <div className='dragBox'
             style={{left: left + 'px', top: top + 'px'}}
             onMouseDown={this.mouseDown.bind(this)}>
          <WrapperComponent top={top} left={left} {...this.props}/>
        </div>
      );
    }

    constructor(props) {
      super(props);
    }

  }

}
